<template>
	<div class="container box-3">
		<div class="content-1" v-if="hasData">
			<p class="title">目前获得K钻数量结算<span>{{all_k_num}} K钻</span></p>
			<ul class="recordWrap">

				<li v-for="(item, index) in activityAwardList">
					<p class="dec">答题所获奖励</p>
					<div class="time">{{dealTime(item.over_time)}}</div>
					<div class="foot">
						<span class="K">K钻</span>
						<span class="num">{{item.k_num}}</span>
					</div>
				</li>

				<li v-for="(item, index) in lotteryAwardList">
					<p class="dec">抽奖所获奖励</p>
					<div class="time">{{dealTime(item.get_time)}}</div>
					<div class="detail">
						<span class="name">{{item.name}}</span>
						<span class="tip" v-if="item.type == 2">（请长按复制进游戏兑换）</span>
					</div>
					<input type="text" class="code" :value="item.code" v-if="item.type == 2" />
					<div class="foot">
						<span class="K" v-if="item.type == 3">K钻</span>
						<span class="num" v-if="item.type == 3">{{item.k_num || 0}}</span>
					</div>
				</li>
			</ul>
		</div>
		<div class="content-2" v-if="!hasData">
			<div class="emotion emotion-2"></div>
			<p class="tip">暂无记录~</p>
		</div>
		<a class="btn" href="http://shop.3k.com/?ct=goods&ac=index&game_id=1" title="去兑换奖品"></a>
		<p class="dec">K钻可于3K玩家社区免费兑换礼包、实物</p>
		<div class="close" @click="changeBox"></div>
	</div>
</template>

<script>
	export default {
		name: 'record',
		data() {
			return {
				all_k_num: 0,
				hasData: false,
				activityAwardList: [],
				lotteryAwardList: []
			}
		},
		computed:{
			
		},
		methods: {
			dealTime(time){
				return time.replace(/\s.*$/,'日').replace('-','年').replace('-','月')
			},
			changeBox() {
				this.$emit('changeBox')
			}
		},
		async created() {
			
		},
		async mounted() {
			//			答题获奖记录
			let res = await this.$store.dispatch('activityAwardRecord');
			//			抽奖获奖记录
			let res2 = await this.$store.dispatch('lotteryAwardRecord');
			console.log(res);
			console.log(res2);
			
			
			this.activityAwardList.splice(0, this.activityAwardList.length, ...res.list);
			this.lotteryAwardList.splice(0, this.lotteryAwardList.length, ...res2.list);
			
			console.log(this.activityAwardList);
			console.log(this.lotteryAwardList);
			this.hasData = (res.list.length + res2.list.length > 0) ? true : false;
			
			this.all_k_num = res.list.concat(res2.list).map(e => Number(e.k_num || 0)).reduce((a,b)=> a+b);
		}
	}
</script>

<style lang="less" scoped>
	@import "../css/_modules.less";
	
	@media screen and (orientation: portrait) {
	/*竖屏 css*/
		.box-3 {
			bottom: 0;
		}
	}
	.box-3 {
		position: absolute;
		/*bottom: 0;*/
		
		left: 0;
	    right: 0;
	    margin: auto;
	    margin-top: 1rem;
		.wh(750, 950);
		.bg();
		background-image: url(../img/box-3.png);
		background-position: center 0;
		.emotion {
			.wh(191, 200);
			margin: 0 auto;
			margin-bottom: 0;
			.bg(1);
			&.emotion-1 {
				background-image: url(../img/emotion-1.png);
			}
			&.emotion-2 {
				background-image: url(../img/emotion-2.png);
			}
		}
		.content-1 {
			height: 8.0rem;
			.title {
				width: 6.6rem;
				margin: 0 auto;
				padding-top: 0.75rem;
				font-size: 0.24rem;
				color: #e8fcff;
				text-align: center;
				line-height: 0.7rem;
				border-bottom: 0.02rem dashed #e8fcff;
				span {
					padding-left: 0.2rem;
				}
			}
			.recordWrap {
				height: 6.1rem;
				padding: 0.1rem 0;
				overflow: auto;
				li {
					position: relative;
					width: 5.8rem;
					/*.wh(580, 306);*/
					padding: 0 0.25rem;
					margin: 0.2rem auto;
					background-color: #fef7e7;
					border-radius: 0.2rem;
					.dec {
						position: absolute;
						top: 0.15rem;
						left: -0.21rem;
						.wh(305, 60);
						line-height: 0.4rem;
						font-size: 0.28rem;
						color: #fff;
						text-indent: 0.3rem;
						.bg();
						background-image: url(../img/b3-title.png);
					}
					.time {
						line-height: 0.8rem;
						font-size: 0.24rem;
						color: #fe9c45;
						text-align: right;
					}
					.detail {
						margin: 0.12rem auto 0.2rem;
						padding: 0 0.15rem;
						background-color: #807f7d;
						.box();
						.box-align(center);
						.box-pack(justify);
						span {
							display: block;
							line-height: 0.5rem;
						}
						.name {
							font-size: 0.28rem;
							color: #fff;
						}
						.tip {
							font-size: 0.24rem;
							color: #fff;
						}
					}
					.code {
						margin-bottom: 0.2rem;
						width: 100%;
						line-height: 0.5rem;
						font-size: 0.24rem;
						color: #727272;
						text-align: center;
						box-sizing: border-box;
						border: 0.01rem solid #f0e9db;
					}
					.foot {
						padding: 0 0.05rem;
						min-height: 0.3rem;
						border-top: 0.02rem dashed #d0cbc0;
						.box();
						.box-align(center);
						.box-pack(justify);
						span {
							display: block;
							line-height: 0.5rem;
						}
						.K {
							padding-left: 0.5rem;
							font-size: 0.24rem;
							color: #fe9c45;
							text-align: center;
							.bg();
							background-image: url(../img/K.png);
							background-position: 0 center;
							.background-size(0.3rem 0.25rem);
						}
						.num {
							font-size: 0.24rem;
							color: #fe9c45;
							text-align: center;
						}
					}
				}
			}
		}
		.content-2 {
			height: 5.2rem;
			padding-top: 3rem;
			.tip {
				padding-top: 0.6rem;
				line-height: 1rem;
				font-size: 0.24rem;
				color: #e0f7fe;
				text-align: center;
			}
		}
		.btn {
			margin: 0.15rem auto 0;
			.wh(231, 55);
			.bg();
			background-image: url(../img/btn-b3.png);
			display: block;
		}
		.dec {
			line-height: 0.6rem;
			font-size: 0.2rem;
			color: #fff;
			text-align: center;
		}
		.close {
			position: absolute;
			right: 0.1rem;
			top: -0.4rem;
			z-index: 2;
			.wh(60, 61);
			.bg();
			background-image: url(../img/close.png);
		}
	}
</style>